<template>
  <div id="appStrtisticPage">
    <h2>热门应用统计</h2>
    <v-chart :option="appAnswerCountOptions" style="height: 300px;"></v-chart>
    <h2>应用结果统计</h2>
    <div class="searchBar">
      <a-input-search
        :style="{ width: '320px' }"
        placeholder="输入 appId"
        button-text="搜索"
        size="large"
        search-button
        @search="(value)=>loadAppAnswerResultCountData(value)"
      />
    </div>
    <v-chart :option="appAnswerResultCountOptions" style="height: 300px;"></v-chart>
  </div>
</template>

<script setup lang="ts">

import { ref, watchEffect, computed } from "vue";
import message from "@arco-design/web-vue/es/message";
import API from "@/api";
import {
  getAppAnswerCountUsingGet,
  getAppAnswerResultCountUsingGet
} from "@/api/appStatisticController";
// 引入echart
import VChart from "vue-echarts";
import "echarts";


const appAnswerCountList = ref<API.AppAnswerCountDTO[]>([]);
const appAnswerResultCountList = ref<API.AppAnswerResultCountDTO[]>([]);

/**
 * 加载数据
 * 修改数据的时候重新赋值
 */
const loadAppAnswerCountData = async () => {
  const res = await getAppAnswerCountUsingGet();
  if (res.data.code === 0) {
    appAnswerCountList.value = res.data.data || [];
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

/**
 * 加载数据
 * 修改数据的时候重新赋值
 */
const loadAppAnswerResultCountData = async (appId: string) => {
  if (!appId) {
    return;
  }
  const res = await getAppAnswerResultCountUsingGet({
    appId: appId as any
  });
  if (res.data.code === 0) {
    appAnswerResultCountList.value = res.data.data || [];
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

// 获取旧数据
watchEffect(() => {
  loadAppAnswerCountData();
});

// 获取旧数据
watchEffect(() => {
  loadAppAnswerResultCountData("");
});

const appAnswerCountOptions = computed(() => {
  return {
    xAxis: {
      type: 'category',
      data: appAnswerCountList.value.map((item) => item.appId),
      name: "应用 id"
    },
    yAxis: {
      type: 'value',
      name: "用户答案数"
    },
    series: [
      {
        type: 'bar',
        data: appAnswerCountList.value.map((item) => item.answerCount)
      }
    ]
  };
})



const appAnswerResultCountOptions = computed(() => {
  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '应用答案结果分布',
        type: 'pie',
        radius: '50%',
        data: appAnswerResultCountList.value.map((item) => {
          return {
            value: item.resultCount,
            name: item.resultName
          }
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
})
</script>

<style scoped></style>